<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<style type="text/css">
table {
	width: 100%;
	border-collapse: collapse;	
}

td,th {
	padding: 8px 15px;
	text-align: center;
}
</style>

<p>
	<button type="button" onclick="add()">新增</button> 
	<button type="button" onclick="search()">查询</button>
</p>
<table border="1">
	<thead>
		<th>序号</th>
		<th>课程名称</th>
		<th>课时数</th>
		<th colspan="2">操作</th>
	</thead>
	<tbody id="tbody"></tbody>
</table>
<div id="paging"></div>

<script type="text/javascript">
var queryParam={};
var pageParam={total:0,page:1,size:5};
var paging=null;
$(function(){
	$('#dialog').dialog({
		autoOpen:false,
		title:'编辑',
		modal:true,
		width:400,
		buttons:[{
			text:'提交',
			click : function(){
				var self=$(this);
				var form=$(this).find('form');
				var params=form.serializeObject();
				var action=form.attr('action');
				if(action=='course/save'){
					$.post(action,params,function(data){
						if(!params.id){
							pageParam.total++;
							pageParam.page=Math.ceil(pageParam.total/pageParam.size);
						}
						refreshTable();
						self.dialog('close');
					})
				}else{
					queryParam=params;
					refreshTable();
					self.dialog('close');
				}
			}
		},{
			text :'退出',
			click : function(){
				$(this).dialog('close');
			}
		}]
	})
	refreshTable();

})

function refreshTable(){
	$.post('course/page',$.extend({},queryParam,pageParam),function(data){
		var rows=data.rows;
		pageParam.total=data.total;
		pageParam.page=data.page;
		pageParam.size=data.size;
		var tbody=$('#tbody');
		tbody.empty();
		for(var i=0;i<rows.length;i++){
			var bj=rows[i];
			var tr=$('<tr/>');
			tr.append($('<td/>').html(bj.id));
			tr.append($('<td/>').html(bj.name));
			tr.append($('<td/>').html(bj.classHour));
			tr.append($('<td/>').append($('<button/>').html('修改').attr('onclick','xg('+bj.id+')')));
			tr.append($('<td/>').append($('<button/>').html('删除').attr('onclick','del('+bj.id+')')));
			tbody.append(tr);
		}
		$('button').button();
		if(!paging){
			paging=new Pagination({
		        element: '#paging',  // 渲染的容器  [必填]
		        type: 1,  // 样式类型，默认1 ，目前可选 [1,2] 可自行增加样式   [非必填]
		        layout: 'total, sizes, home, prev, pager, next, last, jumper',  // [必填]
		        pageIndex: 1, // 当前页码 [非必填]
		        pageSize: 10, // 每页显示条数   TODO: 如果使用了sizes这里就无须传参，传了也无效 [必填]
		        pageCount: 9, // 页码显示数量，页码必须大于等于5的奇数，默认页码9  TODO:为了样式美观，参数只能为奇数， 否则会报错 [非必填]
		        total: pageParam.total, // 数据总条数 [必填]
		        singlePageHide: false,  // 单页隐藏， 默认true  如果为true页码少于一页则不会渲染 [非必填]
		        pageSizes: [5,10, 20, 30, 40, 50], // 选择每页条数  TODO: layout的sizes属性存在才生效
		        prevText: '上一页', // 上一页文字，不传默认为箭头图标  [非必填]
		        nextText: '下一页', // 下一页文字，不传默认为箭头图标 [非必填]
		        ellipsis: true, // 页码显示省略符 默认false  [非必填]
		        disabled: true, // 显示禁用手势 默认false  [非必填]
		        currentChange: function(index, pageSize) {  // 页码改变时回调  TODO:第一个参数是当前页码，第二个参数是每页显示条数数量，需使用sizes第二参数才有值。
		            pageParam.page=index;
		        	pageParam.size=pageSize;
					refreshTable();			        	
		        }
		    });
		} else{
			paging.options.total=pageParam.total;
			paging.options.pageIndex=pageParam.page;
			paging.options.pageSize=pageParam.size;
			paging.render();
		} 
	})
}

function xg(id){
	var dialog=$('#dialog');
	dialog.load('course/edit',{id:id},function(){
		dialog.dialog('open');
	})
}
function add(){
	var dialog=$('#dialog');
	dialog.load('course/edit',function(){
		dialog.dialog('open');
	})
}

function search(){
	var dialog=$('#dialog');
	dialog.load('course/search',queryParam,function(){
		dialog.dialog('open');
	});
}
function del(id){
	if(confirm('是否要删除这条数据？')){
		$.post('course/delete',{id:id},function(data){
			pageParam.total--;
			if(pageParam.page>Math.ceil(pageParam.total/pageParam.size)){
				pageParam.page--;
			}
			refreshTable();
		})
	}
}
</script>
